@(kind: Option[String])(implicit request: play.api.mvc.RequestHeader)
@main("Browse") {

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}
	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">Browse</h2>
		</div>
	</div>

	<form class="registration-form form-horizontal" id="form" accept-charset="UTF-8">

		<div class="form-group">
			<label class="control-label col-sm-3">Junction type:</label>
			<div class="col-sm-8">
				<select class="form-control" name="junctionTypes" style="width: 100%">
				</select>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3">Gene type:</label>
			<div class="col-sm-8">
				<select class="form-control" name="geneTypes" style="width: 100%">
				</select>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3"> Annotation:</label>
			<div class="col-sm-8">
				<select class="form-control" name="annotations" style="width: 100%">
				</select>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3">Tumor specific types:</label>
			<div class="col-sm-6">
				<select class="form-control" name="tumorTypes" style="width: 100%">
				</select>
			</div>
			<div class="col-sm-2">
				<select class="form-control" name="tumorTypesMethod" style="width: 100%">
				</select>
			</div>
		</div>

		<div class="form-group">
			<label class="control-label col-sm-3">Order by:</label>
			<div class="col-sm-4">
				<select class="form-control" name="sort" style="width: 100%">
				</select>
			</div>
			<div class="col-sm-4">
				<select class="form-control" name="order" style="width: 100%">
				</select>
			</div>
		</div>

		<div class="form-group">
			<div class="actions col-sm-offset-3 col-sm-3">
				<button type="button" class="btn btn-primary" style="width: 90%;" id="search" onclick="Browse.myRun">
					Search</button>
			</div>
		</div>


	</form>
	<hr>
	<div id="content" style="display: block" >

		<label>Select the columns to display:</label>
		<div id="checkbox" class="checkbox"></div>

		<table class="display table table-bordered" id="table" data-pagination="true"
		data-toolbar="#toolbar" data-page-list="[10, 25, 50, 100]" style="word-wrap: break-word;">
			<thead>

			</thead>
		</table>


	</div>


	<script>

			var kind = "@kind"

			$(function () {
				Browse.init
			})
	</script>


}
